<template>
  <div class="login-page">
    <div class="banner_div">
      <div class="menu_div_container">
        <div class="menu_div">
          <div class="menu_item" @click="page1">
            <div class="item_default">
              <img src="@/assets/menu1.jpg">
            </div>
            <div class="item_active">
                <img class="item_active-img" src="@/assets/menu1.jpg">
            </div>
          </div>
          <div class="menu_item" @click="page2">
            <div class="item_default">
              <img src="@/assets/menu2.jpg">
            </div>
            <div class="item_active">
                <img class="item_active-img" src="@/assets/menu2.jpg">
            </div>
          </div>
          <div class="menu_item" @click="page3">
            <div class="item_default">
              <img src="@/assets/menu3.jpg">
            </div>
            <div class="item_active a3">
              <img class="item_active-img" src="@/assets/menu3.jpg">
            </div>
          </div>
          <div class="menu_item" @click="page4">
            <div class="item_default">
              <img src="@/assets/menu4.jpg">
            </div>
            <div class="item_active a1">
              <img class="item_active-img" src="@/assets/menu4.jpg">
            </div>
          </div>
          <div class="menu_item" @click="page5">
            <div class="item_default">
              <img src="@/assets/menu5.jpg">
            </div>
            <div class="item_active a2">
              <img class="item_active-img" src="@/assets/menu5.jpg">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      now: new Date(),
      timer: null,
      loading: false,

    }
  },
  computed: {
    formattedDateTime() {
      const {now} = this;
      const year = now.getFullYear();
      const month = ('0' + (now.getMonth() + 1)).slice(-2);
      const day = ('0' + now.getDate()).slice(-2);
      const hours = ('0' + now.getHours()).slice(-2);
      const minutes = ('0' + now.getMinutes()).slice(-2);
      const seconds = ('0' + now.getSeconds()).slice(-2);

      return `${year}年${month}月${day}日 ${hours}时${minutes}分${seconds}秒`;
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.now = new Date();
    }, 1000);
  },
  methods: {
    page1(){
      window.open('http://192.168.251.226:8081', '_blank', `width=800, height=600`);
    },
    page2(){
      window.open('http://192.168.251.226:1502/jdyj/#/gl', '_blank', `width=800, height=600`);
    },
    page3(){
      this.$router.push({path: '/index_yz'});
    },
    page4(){
      window.open('http://192.168.251.226:1503/jdyj/#/gl', '_blank', `width=800, height=600`);
    },
    page5(){
      window.open('http://156.0.38.200:9093/userWarning', '_blank', `width=800, height=600`);
    },
    menuPage() {
      this.$router.push({path: '/menu'});

    },
    alertSuccess(msg) {
      this.$message({
        message: msg,
        type: 'success'
      });
    },
    alertError(msg) {
      this.$message({
        message: msg,
        type: 'error'
      });
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
}
</script>

<style scoped>
/*.menu_item:hover > .item_active {
  top: 0;
}*/

.item_active {
  position: absolute;
  z-index: 100;
  top: 100%;
  left: 0;
  width: 220px;
  height: 247px;
  transition: all .25s ease-in-out;
}

.menu_item {
  position: relative;
  overflow: hidden;
  width: 220px;
  height: 247px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.menu_div {
  display: flex;
  justify-content: space-between;
  width: 1200px;
  margin: 0 auto 0;
}
.menu_div_container {
  position: absolute;
  width: 100%;
  top: 59%;
}

.login-page {
  height: 100vh;
  background: url('@/assets/menu_back.png') center no-repeat;
  background-size: cover;
}

.banner_div {
  position: relative;
  padding-bottom: 36.46%;
}

img{
  transition: transform 0.3s ease;
}
img:hover {
  transform: scale(1.1);
}
</style>